<template>
	<view class="activity-page-container">
		<!-- 地图 -->
		<map :longitude="longitude" :latitude="latitude" :markers="markerList" class="map" />
		<!-- 活动列表 -->
		<view v-if="activityList.length == 0" class="no-activity">
			<u-empty mode="data" text="暂无活动！"> </u-empty>
		</view>
		<view v-else class="activity-wrapper">
			<view class="activity-list">
				<view v-for="item in activityList" :key="item.id" class="activity-item" @click="toActivityDetail(item)">
					<view class="activity-title">
						<view class="title">{{ item.title }}</view>
						<view class="tag">{{ item.tag }}</view>
					</view>
					<view class="activity-info">
						<view class="activity-info-item">
							<u-icon name="clock" color="#4B5563" size="16"></u-icon>
							{{ item.date }} <view class="highline">{{ item.time }}</view>
						</view>
						<view class="activity-info-item">
							<u-icon name="map" color="#4B5563" size="16"></u-icon>
							{{ item.locationName }}
						</view>
						<view class="activity-info-item">
							<view class="players">
								<image v-for="player in item.participantVoList" :key="player.id" :src="player.user.avatarUrl" />
								<image :src="item.userVo.avatarUrl" />
							</view>
							<u-icon name="account" color="#4B5563" size="16" style="margin-right: 0px"></u-icon>
							<view>{{ item.participantVoList ? item.participantVoList.length + 1 : 1 }}/{{ item.peopNum }}人</view>
							<u-button>加入</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			longitude: 116.404,
			latitude: 39.915,
			activityList: []
		};
	},
	computed: {
		markerList() {
			return this.activityList.map((item) => {
				return {
					id: item.id,
					latitude: item.latitude,
					longitude: item.longitude,
					iconPath: require('@/static/activity/marker.png'),
					width: 30,
					height: 30
				};
			});
		}
	},
	mounted() {
		this.getActivityList();
	},
	methods: {
		toActivityDetail(item) {
			uni.navigateTo({
				url: `/pages/Activity/ActivityDetail/ActivityDetail?id=${item.id}`
			});
		},
		async getActivityList() {
			const res = await request('/activities/queryAllActivities');
			this.activityList = res.data
				.filter((item) => new Date(item.endTime) > new Date())
				.sort((prev, next) => {
					return new Date(prev.startTime) - new Date(next.startTime);
				})
				.map((item) => {
					return {
						...item,
						date: this.timeCalc(item.startTime),
						time: item.startTime.split(' ')[1] + '-' + item.endTime.split(' ')[1],
						tag: item.gameInfo[0].name
					};
				});
			this.longitude = this.activityList[0].longitude;
			this.latitude = this.activityList[0].latitude;
		},
		timeCalc(time) {
			// 今天、明天、后天、月份-日期
			const today = new Date();
			const targetDate = new Date(time);
			const diff = targetDate - today;
			const diffDays = Math.round(diff / (1000 * 60 * 60 * 24));
			if (diffDays == 0) {
				return `今天`;
			} else if (diffDays == 1) {
				return '明天';
			} else if (diffDays == 2) {
				return '后天';
			} else {
				return `${targetDate.getMonth() + 1 < 10 ? '0' + (targetDate.getMonth() + 1) : targetDate.getMonth() + 1}-${targetDate.getDate()}`;
			}
		}
	}
};
</script>

<style lang="scss">
.activity-page-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.map {
		width: 100%;
		height: 400rpx;
	}

	.activity-wrapper {
		flex: 1;
		overflow-y: scroll;

		.activity-list {
			margin: 40rpx 0;
			padding: 0 20rpx;

			.activity-item {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 25rpx;
				padding: 40rpx;
				box-shadow: 0 3px 9px #eee;
				border: 1px solid #eee;
				color: #4b5563;

				.activity-title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
					.tag {
						padding: 4rpx 8rpx;
						background-color: $theme-color-bg;
						color: $theme-color;
						font-size: 24rpx;
						border-radius: 25rpx;
						padding: 10rpx 20rpx;
					}
				}

				.activity-info {
					display: flex;
					flex-direction: column;
					font-size: $font-size-base;
					gap: 10px;

					.activity-info-item {
						display: flex;
						align-items: center;
						gap: 10px;

						.players {
							display: flex;
							align-items: center;
							margin-right: 40rpx;
							width: 100rpx;

							image {
								width: 50rpx;
								height: 50rpx;
								border-radius: 100%;
								margin-right: -30rpx;
								border: 2px solid #fff;
							}
						}

						.highline {
							color: $theme-color-light;
						}

						.u-button {
							width: 100rpx;
							height: 60rpx;
							font-size: $font-size-small;
							margin-left: auto;
							margin-right: 0;
							background-color: $theme-color;
							color: #fff;
							border-radius: 8px;
						}
					}
				}
			}
		}
	}
}

.no-activity {
	margin-top: 100rpx;
}
</style>
